<template>
  <el-container class="person-container">
    <!-- 搜索区域 -->
    <el-header>
      <el-form>
        <el-row type="flex">
          <el-col :span="7">
            <el-form-item label="单位：">
              <el-select size="small" v-model="rankingList.archDeptName" placeholder="请选择">
                <el-option v-for="item in archDeptForm" :key="item.archDeptId" :label="item.archDeptName"
                  :value="item.archDeptName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="知识体系：">
              <el-select size="small" v-model="rankingList.knowCateName" placeholder="请选择" filterable>
                <el-option v-for="item in knowCateForm" :key="item.knowCateId"
                  :label="`${item.cateId}_${item.knowCateName}`" :value="item.knowCateName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="统计类型：">
              <el-select size="small" v-model="timeType">
                <el-option label="不限" value="0"></el-option>
                <el-option label="按年" value="1"></el-option>
                <el-option label="按月" value="2"></el-option>
                <el-option label="按日" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="选择时间：">
              <el-date-picker size="small" v-if="timeType === '0'" type="" :editable="false">
              </el-date-picker>
              <el-date-picker size="small" v-if="timeType === '1'" v-model="timeTypeForm.year" type="year"
                value-format="yyyy" placeholder="选择年" :editable="false"></el-date-picker>
              <el-date-picker size="small" v-if="timeType === '2'" v-model="timeTypeForm.month" type="month"
                value-format="yyyy-MM" placeholder="选择月" :editable="false"></el-date-picker>
              <el-date-picker size="small" v-if="timeType === '3'" v-model="timeTypeForm.day" type="date"
                value-format="yyyy-MM-dd" placeholder="选择日" :editable="false"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-form-item>
              <el-button size="small" type="primary" @click="getTable">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <!-- 图表区域 -->
    <el-main>
      <!-- 知识发布统计图 -->
      <div style="width: 60%;height:50%; margin: auto;">
        <bar-Chart :chartData="chartData" v-if="chartData.xData.length>0"/>
      </div>
      
      <!-- 知识发布表格 -->
      <div>
        <div style="float: right; padding: 15px;">
          <el-button  size="small" type="primary" @click="exportForm">导出</el-button>
        </div>        
        <el-table :data="tableData" :header-cell-style="{background:'#f5f7fd',color:'#5d6880'}" style="width: 100%" border>
          <el-table-column prop="rank" label="序号">
          </el-table-column>
          <el-table-column prop="knowCateName" label="知识体系">
          </el-table-column>
          <el-table-column prop="period" label="发布时间">
          </el-table-column>
          <el-table-column prop="archDeptName" label="单位名称">
          </el-table-column>
          <el-table-column prop="staffName" label="员工姓名">
          </el-table-column>
          <el-table-column prop="sum" label="发布量">
          </el-table-column>
        </el-table>
      </div>

    </el-main>
  </el-container>
</template>

<script>
import { getArchDeptApi, getKnowCategoryApi, getTableApi, exportApi } from '@/api/reportApi'
import barChart from './barChart.vue'

export default {
  components: {
    barChart
  },
  data() {
    return {
      rankingList: {
        // 解决placeholder不显示问题
        archDeptName: undefined,
        knowCateName: undefined,
        period: null,
      },
      timeType: '0',
      timeTypeForm: {
        year: '',
        month: '',
        day: '',
      },
      
      // 调用接口数据
      archDeptForm: [],
      knowCateForm: [],

      personData: {},
      chartData:{
        chartTitle: "个人知识发布量统计",
        xData: [],
        yData: [],
      },
      
      tableData: [],
    }
  },
  created() {
    this.getArchDept()
    this.getKnowCategory()
  },
  methods: {
    async getArchDept() {
      const { data: res } = await getArchDeptApi();
      this.archDeptForm = res.list;
    },
    async getKnowCategory() {
      const { data: res } = await getKnowCategoryApi();
      this.knowCateForm = res.list;
    },
    async getTable() {
      // 测试数据
      console.log(this.rankingList.archDeptName);
      console.log(this.rankingList.knowCateName);
      console.log(this.timeType);
      if (this.timeType == '1') this.period = this.timeTypeForm.year;
      else if (this.timeType == '2') this.period = this.timeTypeForm.month;
      else if (this.timeType == '3') this.period = this.timeTypeForm.day;
      console.log(this.period);

      // 初始化数据
      this.chartData.xData = [];
      this.chartData.yData = [];
      // let personChart = echarts.getInstanceByDom(document.getElementById("personChart"));
      // if (personChart == null) {
      //   personChart = echarts.init(document.getElementById("personChart"));
      // }

      const { data: res } = await getTableApi({ ArchDeptName: this.rankingList.archDeptName, KnowCateName: this.rankingList.knowCateName, TimeType: this.timeType, period: this.period });
      this.personData = res.list;
      this.tableData = res.list;
      for (let i = 0; i < this.personData.length; i++) {
        this.chartData.xData[i] = this.personData[i].staffName;
        this.chartData.yData[i] = this.personData[i].sum;
      };

    },
    // 订单导出
    exportForm() {
      exportApi({ ArchDeptName: this.rankingList.archDeptName, KnowCateName: this.rankingList.knowCateName, TimeType: this.timeType, period: this.period}).then(res => {
        // console.log(res);
        const link = document.createElement('a');// 创建a标签
        let blob = new Blob([res.data],{type: 'application/vnd.ms-excel;charset=UTF-8'}); // 设置文件类型 
        link.style.display = "none";
        link.href = URL.createObjectURL(blob); // 创建URL
        link.setAttribute("download", "个人知识发布量统计表.xls");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      })
    },
  }
}
</script>

<style lang="less" scoped>
.person-container {
  padding: 15px;
  margin: 0;
  height: 100%;
  background-color: #f5f7fd;
  font-size: 14px;
}

// todo 搜索区域
.el-header {
  padding: 0 30px;
  margin: 0;
  height: 60px;
  background-color: #fff;
}

.el-form-item {
  // ! 垂直居中
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

// todo 图标区域
.el-main {
  margin-top: 15px;
  background-color: #fff;
}
</style>